import React, { PropTypes } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Row, Col, Button, Icon, Select, Popconfirm} from 'antd';

import './less/courseArrange.less';

const Option = Select.Option;
const color = ['#44b336', '#ff9500', '#4c79f0', '#37d4cb', '#f56262', '#d748d6', '#ede63b', '#6f0edd'];
var subData = [0, 1, 2, 0, 0, 2, 0, 0, 2, 1, 0, 0, 0, 0, 0];
var subjectTitle = [];

class CourseArrange extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      isEdit: [],
      subjectData: [...subData],
      selectValue: 1,
      subjectName: [],
      subNum: 2
    };
  }

  componentWillMount() {
    for(let i = 0; i < 15; i++) {
      this.state.isEdit.push(false);
    }
  }

  componentDidMount() {
    subjectTitle = [];
    for(let i = 0; i < this.state.subNum; i++) {
      subjectTitle.push(`科目名称${i + 1}`);
    }
    this.setState({
      subjectName: subjectTitle
    });
  }

  _addSubName() {
    let {subjectName, subNum} = this.state;
    subNum++;
    subjectName.push(`科目名称${subNum}`);
    this.setState({
      subjectName,
      subNum
    });
  }

  _selectChange(val) {
    this.setState({
      selectValue: val
    });
  }

  _operateSubject(index, handel) {
    let subjectData = [...this.state.subjectData];
    if(handel == 'add') {
      subjectData.splice(index, 1, Number(this.state.selectValue));
    } else if (handel == 'del') {
      subjectData.splice(index, 1, 0);
    }
    this.setState({
      subjectData,
    });

    this._hideEdit(index);
  }

  _showEdit(data, index) {
    let isEdit = [...this.state.isEdit];
    isEdit.splice(index, 1, true);
    this.setState({
      isEdit,
      selectValue: data == 0 ? 1 : data
    });
  }

  _hideEdit(index) {
    let isEdit = [...this.state.isEdit];
    isEdit.splice(index, 1, false);
    this.setState({
      isEdit,
    });
  }

  _showButton(e, index) {
    if(this.state.isEdit.indexOf(true) != -1) return;

    let tar = e.currentTarget;
    if(this.state.subjectData[index] == 0) {
      tar.children[0].children[0].style.display = 'block';
    } else {
      tar.style.borderColor = '#00b7ee';
      tar.children[1].children[0].style.display = 'block';
    }
  }

  _hideButton(e, index) {
    if(this.state.isEdit.indexOf(true) != -1) return;

    let tar = e.currentTarget;
    if(this.state.subjectData[index] == 0) {
      tar.children[0].children[0].style.display = 'none';
    } else {
      tar.style.borderColor = '#e5e5e5';
      tar.children[1].children[0].style.display = 'none';
    }
  }

  render() {
    let _subOption = [];
    this.state.subjectName.map((ele, index) => {
      _subOption.push(
        <Option value={index + 1} key={`option${index}`}><div><span className='optionIcon' style={{backgroundColor: color[index]}}></span>{ele}</div></Option>
      );
    });

    let _list = [];
    this.state.subjectData.map((ele, index) => {
      let _temp = ele == 0 ? (
        <Button type="primary" className="addSubject" onClick={() => this._showEdit(ele, index)}>
          <Icon style={{fontSize:30,color:'#fff'}} type="plus-circle-o"/>
          <p style={{fontSize:14,marginTop:10}}>添加课程</p>
        </Button>
      ) : (
        <div className="handelBox">
          <div className="edit" onClick={() => this._showEdit(ele, index)}><Icon style={{fontSize:24,color:'#fff'}} type="edit"/></div>
          <Popconfirm title="确定删除该课程记录？" placement="topRight" onConfirm={() => this._operateSubject(index, 'del')} okText="确定" cancelText="取消">
            <div className="delete"><Icon style={{fontSize:24,color:'#fff'}} type="close"/></div>
          </Popconfirm>
        </div>
      );

      _list.push(
        <li className="subBox" key={`list${index}`} onMouseOver={(e) => this._showButton(e, index)} onMouseOut={(e) => this._hideButton(e, index)} >
          {ele != 0 && <div className="icon" style={{backgroundColor: color[ele - 1] }}></div>}
          {!this.state.isEdit[index] ? (
            <div className="boxHover">
              {_temp}
            </div>
          ) : (
            <div className="editSubject">
              <Select defaultValue={ele == 0 ? 1 : ele} className="select" onChange={value => this._selectChange(value)}>
                {_subOption}
              </Select>
              <div className="buttonBox">
                <Button type="ghost" className="bt" onClick={() => this._operateSubject(index, 'add')}>确定</Button>
                <Button type="ghost" className="bt" onClick={() => this._hideEdit(index)}>取消</Button>
              </div>
            </div>
          ) }
        </li>
      );
    });

    let _nameList = [];
    this.state.subjectName.map((ele, index) => {
      _nameList.push(
        <li className="subjectList" key={`subName${index}`}>
          <div className="icon" style={{backgroundColor: color[index]}}></div>
          <span>{ele}</span>
        </li>
      );
    });

    return(
      <Card title="课程安排" className="subjectManage">
        <Row>
          <Col span={3}>
            <Button type='ghost' icon='bars' onClick={() => this._addSubName()}>科目管理</Button>
            <ul>
              {_nameList}
            </ul>
          </Col>
          <Col span={18}>
            <Row className="titleTop">
              <Col span={2} className="col"></Col>
              <Col span={4} className="col">星期一</Col>
              <Col span={4} className="col">星期二</Col>
              <Col span={4} className="col">星期三</Col>
              <Col span={4} className="col">星期四</Col>
              <Col span={4} className="col">星期五</Col>
            </Row>
            <Row className="content">
              <Col span={2} className="titleLeft">
                <p>1-2</p>
                <p>3-4</p>
                <p>5-6</p>
              </Col>
              <Col span={20} className="container">
                <ul>
                  {_list}
                </ul>
              </Col>
            </Row>
          </Col>
        </Row>
      </Card>
    );
  }
}

export default CourseArrange;
